<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>源辰租房</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/nprogress.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
    <link rel="shortcut icon" href="images/icon/favicon.ico">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/nprogress.js"></script>
    <script src="js/jquery.lazyload.min.js"></script>

    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/login.js"></script>
    <script src="js/tenant.js"></script>
    <style>
        .el-drawer__body{
            left: 0;
            overflow-x: hidden;
            overflow-y: scroll;
        }
        .el-drawer__body::-webkit-scrollbar{
            display: none;
        }
        #content,#content1,#content2{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 40px;
        }
        .el-dropdown-link {
            cursor: pointer;
            color: black;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
        .el-drawer__header>:first-child {
            text-align: center;
            font-size: 18px;
            color: black;
        }
        html,body,#app{
            height: 100%;
        }
        .pagination {
            margin: auto;
        }
        .el-button--primary {
            width: 200px;
            height: 50px;
            margin: 20px auto;
        }
        .muted{
            margin-right: 15px;
            font-size: 12px;
            color: #BBB;
        }
        .thumbnail{
            float: left;
            margin-left: -135px;
            border: none;
            margin-bottom: 0;
        }
        .thumbnail a>img, .thumbnail>img {
            height: 80px;
        }
        .excerpt header {
            width: 500px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body class="user-select">
<div id="app">
    <mymain @logined="onlogin">
        <div class="content-wrap" >
            <div class="content" style="margin-right: 0">
                <div class="title">
                    <h3>收藏夹->{{folderName}}</h3>
                    <el-dropdown style="float: right; margin-right: 20px">
                        <span class="el-dropdown-link">
                            管理<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="load()">添加房源</el-dropdown-item>
                            <el-dropdown-item v-if="collects.length == 0" disabled>批量管理房源</el-dropdown-item>
                            <el-dropdown-item v-else @click.native="isManage=true">批量管理房源</el-dropdown-item>
                            <el-dropdown-item @click.native="folderNameWinVisible = true">修改名称</el-dropdown-item>
                            <el-dropdown-item>设为私密</el-dropdown-item>
                            <el-dropdown-item @click.native="dialogVisible=true" style="color: red">删除收藏夹</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div v-if="collects.length==0" style="text-align: center; margin: 250px; font-size: 38px; display: grid;">
                    暂无收藏记录!
                    <el-button type="primary" @click.native="load()">添加文章</el-button>
                </div>
                <article class="excerpt excerpt-1" style="height: 180px;" v-for="h in collects" >
                    <a @click="goHouseDetails(h.id)" class="focus" title="">
                        <img class="thumb" :src="h.image" alt="">
                    </a>
                    <header><a class="cat" href="program">{{h.type}}<i></i></a>
                        <h2><a @click="goHouseDetails(h.id)" title="" style="font-weight: 400; font-size: 20px">{{h.introduce}}</a></h2>
                    </header>
                    <div style="display: flex;">
                        <p class="meta" style="width: 475px">
                            <span class="time"> {{h.scale}}</span>
                            <span class="views"> {{h.area}}m²</span><br><br>
                            <span class="views"> {{h.address}}</span><br><br>
                            <span class="views"> 来自经纪人</span>
                        </p>
                        <p class="meta" style="font-size: 28px;color: red;font-weight: 400;float: right;width: 410px">
                            <span style="margin-left: 200px;"> {{h.price}}元/月</span>
                        </p>
                        <div v-if="isManage" style="float: right;margin: 8px 0px 0px 0px;">
                            <a v-if="folderArticleIds.includes(h.houseId)" @click="tFolderSelect(h.houseId)" class="el-icon-circle-check" style="font-size: 2em; margin: auto;"></a>
                            <a v-else @click="fFolderSelect(h.houseId)" class="el-icon-plus" style="font-size: 2em; margin: auto;"></a>
                        </div>
                    </div>
                </article>
                <div style="display: flex">
                    <nav v-if="collects.length != 0" class="pagination" style="margin: 8px 125px 0px 400px;">
                        <div class="block">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page.sync="current"
                                    :page-size.sync="size"
                                    layout="total, prev, pager, next, jumper"
                                    :total="total">
                            </el-pagination>
                        </div>
                    </nav>
                    <el-button v-if="isManage" style="margin: 20px 10px" @click="backManage()">取消</el-button>
                    <el-button :disabled="folderArticleIds.length == 0" v-if="isManage" @click="update()" style="margin: 20px 10px">移动到</el-button>
                    <el-button v-if="isManage" style="margin: 20px 10px" type="primary" @click="deleteArticleFolder()">移出收藏夹</el-button>
                </div>
            </div>

            <el-drawer  title="请选择收藏夹"
                        destroy-on-close="true"
                        :visible.sync="drawerFolder"
                        direction="ltr"
                        wrapperClosable="false"
                        size="35%">
                <ul>
                    <li v-for="map in list" style="height: 150px;width: 360px;margin: auto;">
                        <div style="padding: 10px 0px 0px 20px; display: flex">
                            <div style="width: 290px; cursor: pointer" @click="goFolderHtml(map.folderId, map.folderName)">
                                <span class="text" style=" display: block;">{{map.folderName}}</span>
                                <span class="muted">{{map.collectsMap.total}}个作品</span>
                                <span class="muted"><i class="glyphicon glyphicon-eye-open"></i> 120</span>
                            </div>
                            <div v-if="isManage" style="width: 30px;">
                                <span v-if="drawerFolderId == map.folderId" @click="tSelectFolder()" class="el-icon-circle-check" style="font-size: 2em;  cursor: pointer"></span>
                                <span v-else @click="fSelectFolder(map.folderId)" class="el-icon-circle-plus-outline" style="font-size: 2em;  cursor: pointer"></span>
                            </div>
                        </div>
                        <div style="padding: 0px 15px 10px 139px; cursor: pointer" @click="goFolderHtml(map.folderId, map.folderName)">
                            <span class="thumbnail">
                                <img v-for="(m,index) in map.collectsMap.collects" v-if="index < 3" class="thumb" :src="m.titleImgs" style="float: left;margin-left: 10px;width: 100px">
                                <img v-if="map.collectsMap.collects.length < 1" class="thumb" src="images/folder.png" alt="" style="float: left;margin-left: 10px;width: 100px">
                                <img v-if="map.collectsMap.collects.length < 2" class="thumb" src="images/folder.png" alt="" style="float: left;margin-left: 10px;width: 100px">
                                <img v-if="map.collectsMap.collects.length < 3" class="thumb" src="images/folder.png" alt="" style="float: left;margin-left: 10px;width: 100px">
                            </span>
                        </div>
                    </li>
                </ul>
                <div style="display: flex;">
                    <nav class="pagination">
                        <div class="block">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentFolderDrawer"
                                    :current-page.sync="folderCurrent"
                                    :page-size.sync="size"
                                    layout="total, prev, pager, next, jumper"
                                    :total="folderTotal">
                            </el-pagination>
                        </div>
                    </nav>
                    <el-button type="primary" @click="updateArticleFolder()" style="text-align: center; float: right; width: 100px">确定</el-button>
                </div>

            </el-drawer>

            <el-drawer  title="添加文章"
                        destroy-on-close="true"
                        :visible.sync="drawer"
                        direction="ltr"
                        wrapperClosable="false"
                        size="70%">
                <div v-for="h in articleNotFolder" style="display: flex">
                    <article class="excerpt excerpt-1" style="width: 70%; margin: auto" >
                        <a @click="goHouseDetails(h.id)" class="focus" title="">
                            <img class="thumb" :src="h.image" alt="">
                        </a>
                        <header>
                            <a class="cat" href="program">{{h.type}}<i></i></a>
                            <h2><a @click="goHouseDetails(h.id)" title="" style="font-weight: 400; font-size: 20px">{{h.introduce}}</a></h2>
                        </header>
                        <div style="display: flex;">
                            <p class="meta">
                                <span class="time"> {{h.scale}}</span>
                                <span class="views"> {{h.area}}m²</span><br><br>
                                <span class="views"> {{h.address}}</span>
                                <span class="views"> 高桥一号小区</span><br><br>
                                <span class="views"> 来自经纪人</span>
                            </p>
                            <p class="meta" style="margin: auto;font-size: 28px;color: red;font-weight: 400;float: right;">
                                <span style="margin-left: 200px;"> {{h.price}}元/月</span>
                            </p>
                        </div>
                    </article>
                    <a v-if="articleIds.includes(h.houseId)" @click="tSelect(h.houseId)" class="el-icon-circle-check" style="font-size: 2em; margin: auto;"></a>
                    <a v-else @click="fSelect(h.houseId)" class="el-icon-plus" style="font-size: 2em; margin: auto;"></a>
                </div>
                <div style="display: flex;">
                    <nav class="pagination">
                        <div class="block">
                            <el-pagination
                                    background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentDrawer"
                                    :current-page.sync="drawerCurrent"
                                    :page-size.sync="size"
                                    layout="total, prev, pager, next, jumper"
                                    :total="drawerTotal">
                            </el-pagination>
                        </div>
                    </nav>
                    <el-button type="primary" @click="addArticleFolder()" style="text-align: center; float: right; margin: 20px 40px">添加</el-button>
                </div>

            </el-drawer>

            <el-dialog title="修改名称" :visible.sync="folderNameWinVisible">
                <el-form>
                    <el-form-item label="收藏夹名称" label-width="100px">
                        <el-input v-model="folderName" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="backFolderNameWin" style="height: 50px">取 消</el-button>
                    <el-button type="primary" @click="modFolder" style="width: 100px">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%"
                    center>
                    <span>是否确定删除“{{folderName}}”收藏夹</span>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="deleteFolder">确 定</el-button>
                    </span>
            </el-dialog>
        </div>
    </mymain>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            user: {},
            folderId: 1,
            folderName: localStorage.getItem("folderName"),
            collects: {},
            size: 3,
            current: 1,
            total: 0,
            folderNameWinVisible: false,
            dialogVisible: false,
            drawer: false,
            drawerFolder: false,
            articleNotFolder: {},
            drawerCurrent: 1,
            drawerTotal: 0,
            folderCurrent: 1,
            folderTotal: 0,
            isManage: false,
            articleIds: [],
            folderArticleIds: [],
            list: {},
            drawerFolderId: 0,
        },
        created(){
            this.query();
        },
        methods:{
            onlogin(user){
                this.user = user;
            },
            query(){
                if (localStorage.getItem("folderId") != null){
                    this.folderId = localStorage.getItem("folderId")
                }
              let params = new URLSearchParams();
              params.append("folderId", this.folderId);
              params.append("current", this.current);
              axios.post("folder/selectCollectByFolderId", params).then(res=>{
                  this.collects = res.data.collects;
                  this.total = res.data.total;
                  if (this.collects.length != 0){
                      this.folderName = this.collects[0].folderName;
                  } else {
                      this.folderName = localStorage.getItem("folderName")
                  }
              })
            },
            update(){
                this.drawerFolderId = 0;
                this.drawerFolder = true;
                this.selectFolder();
            },
            load(){
                if (this.drawer == false){
                    this.articleIds = [];
                    this.drawerCurrent = 1;
                }
                axios.post("folder/selectCollectNotFolder?current=" + this.drawerCurrent
                            + "&userId=" + this.user.id).then(res=>{
                    console.log(res.data);
                    this.articleNotFolder = res.data.list;
                    this.drawerTotal = res.data.total;
                    this.drawer = true;
                })
            },
            selectFolder(){
                let params = new URLSearchParams();
                params.append("current", this.folderCurrent);
                params.append("userId", this.user.id);
                params.append("folderId", this.folderId);
                axios.post("folder/selectFolder", params).then(res=>{
                    console.log(res.data)
                    this.list = res.data.list;
                    this.folderTotal = res.data.total;
                })
            },
            addArticleFolder(){
                let params = new URLSearchParams();
                params.append("articleIds", this.articleIds);
                params.append("folderId", this.folderId);
                params.append("userId", this.user.id);
                axios.post("folder/updateArticleFolder", params).then(res=>{
                    if (res.data.code == 1){
                        this.query();
                        this.drawer = false;
                        this.$message(res.data.msg);
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            },
            deleteArticleFolder(){
                let params = new URLSearchParams();
                params.append("articleIds", this.folderArticleIds);
                params.append("folderId", 0);
                params.append("userId", this.user.id);
                axios.post("folder/updateArticleFolder", params).then(res=>{
                    if (res.data.code == 1){
                        this.query();
                        this.$message(res.data.msg);
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            },
            updateArticleFolder(){
                let params = new URLSearchParams();
                params.append("articleIds", this.folderArticleIds);
                params.append("folderId", this.drawerFolderId);
                params.append("userId", this.user.id);
                axios.post("folder/updateArticleFolder", params).then(res=>{
                    if (res.data.code == 1){
                        this.query();
                        this.drawerFolder = false;
                        this.$message("移动成功!");
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            },
            deleteFolder(){
                axios.post("folder/deleteFolderById?folderId=" + this.folderId).then(res=>{
                    if (res.data.code == 1){
                        this.$message(res.data.msg);
                        setTimeout(()=>{
                            location.href = "collect.html";
                        },1000)
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            },
            modFolder(){
                let params = new URLSearchParams();
                params.append("folderId", this.folderId);
                params.append("folderName", this.folderName);
                axios.post("folder/modFolderName", params).then(res=>{
                    if (res.data.code == 1){
                        this.$message(res.data.msg);
                        this.folderNameWinVisible = false;
                        if (this.collects.length != 0){
                            this.query();
                        }
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            },
            tSelectFolder(){
                this.drawerFolderId = 0;
            },
            fSelectFolder(folderId){
                this.drawerFolderId = folderId;
            },
            tSelect(articleId){
                for (let i = 0; i < this.articleIds.length; i++) {
                    if (this.articleIds[i] == articleId){
                        this.articleIds.splice(i, 1);
                    }
                }
            },
            fSelect(articleId){
                this.articleIds.push(articleId);
            },
            backManage(){
                this.folderArticleIds = [];
                this.isManage = false;
            },
            tFolderSelect(articleId){
                for (let i = 0; i < this.folderArticleIds.length; ++i) {
                    if (this.folderArticleIds[i] == articleId){
                        this.folderArticleIds.splice(i, 1);
                    }
                }
            },
            fFolderSelect(articleId){
                this.folderArticleIds.push(articleId);
            },
            backFolderNameWin(){
                this.folderNameWinVisible = false;
                this.query();
            },
            handleCurrentDrawer(){
                this.load();
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                //this.$forceUpdate();
                console.log(`当前页: ${val}`);
                this.query();
            },
            handleCurrentFolderDrawer(){
                this.selectFolder();
            },
            goHouseDetails(id){
                localStorage.setItem("houseId",id);
                location.href = "houseDetails.html";
            },
        }

    })
</script>

<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ias.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>